<template>
	<view>
		<view class="block-2-icon">
			<view class="box">
				<view class="number">{{localCurrentProduct.likes}}</view>
				<image src="/static/icon/like1.png" class="icon2-style"></image>
			</view>
			<view class="box">
				<view class="number">{{localCurrentProduct.star || 0}}</view>
				<image src="/static/icon/star.png" class="icon2-style"></image>
			</view>
			<view class="box">
				<view class="number">{{localCurrentProduct.likes}}</view>
				<image src="/static/icon/share.png" class="icon2-style"></image>
			</view>
			<view class="box">
				<view class="number">{{localCurrentProduct.likes}}</view>
				<image src="/static/icon/message.png" class="icon2-style" @click="clickMessage"></image>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {ref,defineProps,defineEmits} from 'vue'
	import { Product } from '../types/types';
	const props = defineProps<{
		currentProduct:Product
	}>()
	const emits = defineEmits()
	const localCurrentProduct = ref(props.currentProduct)
	
	const clickMessage = ()=>{
		emits('clickMessage')
	}
</script>

<style scoped lang="scss">
	.block-2-icon{
		width: 100%;
		display: flex;
		justify-content: space-around;
		font-size: 0.6rem;
	}
	.box{
		display: flex;
		align-items: center;
		margin-right: 0.3rem;
	}
	.number{
		width: 1.7rem;
		text-align: center;
	}
	.icon2-style{
		width: 1.1rem;
		height: 1.1rem;
		margin-left: 0.2rem;
	}
</style>